<template>
  <div v-if="visible" class="modal-overlay">
    <div class="modal-content">
      <!-- 左侧图片区域 -->
      <div class="modal-left"></div>

      <!-- 右侧表单区域 -->
      <div class="modal-right">
        <div class="modal-header">
          <button class="close-btn" @click="closeModal">
            <img src="~/assets/images/img/A-2-1-PC登陆-注册_slices/关闭.png" alt="关闭" class="close-icon">
          </button>
        </div>

        <!-- 账号登录步骤 -->
        <template v-if="currentStep === 'login'">
          <h2 class="modal-title">账号登录</h2>

          <form class="login-form" @submit.prevent="handleLogin">
          <div class="form-group">
            <input 
              type="text" 
              v-model="emailOrPhone" 
              placeholder="邮箱/手机号" 
              class="form-input"
              required
            >
          </div>

          <div class="form-group password-group">
            <input 
              :type="showPassword ? 'text' : 'password'" 
              v-model="password" 
              placeholder="登录密码" 
              class="form-input"
              required
            >
            <button 
              type="button" 
              class="toggle-password" 
              @click="showPassword = !showPassword"
            >
              <img src="~/assets/images/img/A-2-1-PC登陆-注册_slices/眼睛显隐.png" alt="显示/隐藏密码" class="toggle-password-icon">
            </button>
          </div>

          <!-- 滑块验证 -->
          <div class="slider-verify">
            <div class="slider-track" :class="{ 'slider-complete': isSliderComplete }" ref="sliderTrack">
              <div class="slider-progress" :style="{ width: sliderPosition + 'px' }"></div>
              <div v-if="!isSliderComplete" class="slider-text">请按住滑块,拖动到最右边</div>
              <div v-if="isSliderComplete" class="slider-success-content">
                <span class="verify-success-text">验证成功</span>
              </div>
              <div 
                class="slider-handle" 
                :class="{ 'slider-handle-complete': isSliderComplete }"
                :style="{ left: sliderPosition + 'px' }"
                @mousedown="startDrag"
              >
                <img :src="isSliderComplete ? verifySuccessIcon : sliderIcon" alt="验证" class="slider-arrow">
              </div>
            </div>
          </div>

          <button 
            type="submit" 
            class="login-btn" 
            :disabled="!isSliderComplete"
          >
            登录
          </button>
        </form>

        <div class="login-options">
          <label class="auto-login">
            <input type="checkbox" v-model="autoLogin" class="checkbox-input">
            <span class="checkbox-custom" :class="{ 'checked': autoLogin }">
              <img v-if="autoLogin" :src="checkboxChecked" alt="已选择" class="checkbox-icon">
            </span>
            <span>12小时内自动登录</span>
          </label>
          <div class="login-links">
            <a href="#" @click.prevent="switchToRegister">马上注册</a>
            <span class="divider">|</span>
            <a href="#" @click.prevent="forgotPassword" class="forgot-password-link">忘记密码</a>
          </div>
        </div>

        <div class="social-login">
          <div class="social-icon-wrapper">
            <div 
              class="social-icon"
              @mouseenter="hoverIcon1 = true"
              @mouseleave="hoverIcon1 = false"
              @click="switchToWechat"
            >
              <img :src="hoverIcon1 ? socialIcon1Hover : socialIcon1" alt="三方登录1" class="social-icon-img">
            </div>
          </div>
          <div class="social-icon-wrapper">
            <div 
              class="social-icon"
              @mouseenter="hoverIcon2 = true"
              @mouseleave="hoverIcon2 = false"
            >
              <img :src="hoverIcon2 ? socialIcon2Hover : socialIcon2" alt="三方登录2" class="social-icon-img">
            </div>
            <div class="last-login">(上次登录)</div>
          </div>
          <div class="social-icon-wrapper">
            <div 
              class="social-icon"
              @mouseenter="hoverIcon3 = true"
              @mouseleave="hoverIcon3 = false"
            >
              <img :src="hoverIcon3 ? socialIcon3Hover : socialIcon3" alt="三方登录3" class="social-icon-img">
            </div>
          </div>
        </div>

          <div class="legal-disclaimer">
            注册和登录即视为您已阅读并同意
            <a href="#">《网站协议》</a>
            <a href="#">《版权声明》</a>
          </div>
        </template>

        <!-- 微信扫码登录步骤 -->
        <template v-if="currentStep === 'wechat'">
          <h2 class="modal-title">微信扫码登录</h2>

          <div class="wechat-qr-container">
            <div class="qr-code-wrapper">
              <div class="qr-code-border">
                <div class="qr-code">
                  <img :src="qrCodeImage" alt="微信二维码" class="qr-code-img">
                </div>
              </div>
            </div>

            <div class="auto-login-option">
              <label class="auto-login">
                <input type="checkbox" v-model="autoLogin" class="checkbox-input">
                <span class="checkbox-custom" :class="{ 'checked': autoLogin }">
                  <img v-if="autoLogin" :src="checkboxChecked" alt="已选择" class="checkbox-icon">
                </span>
                <span>12小时内自动登录</span>
              </label>
            </div>

            <div class="back-link">
              <a href="#" @click.prevent="goBackToLogin">返回上一步</a>
            </div>
          </div>
        </template>

        <!-- 忘记密码步骤 -->
        <template v-if="currentStep === 'forgotPassword'">
          <h2 class="modal-title">重置登录密码</h2>

          <form class="forgot-password-form" @submit.prevent="handleResetPassword">
            <div class="form-group">
              <input 
                type="text" 
                v-model="resetPhone" 
                placeholder="手机号码" 
                class="form-input"
                required
              >
            </div>

            <!-- 滑块验证 -->
            <div class="slider-verify">
              <div class="slider-track" :class="{ 'slider-complete': isResetSliderComplete }" ref="resetSliderTrack">
                <div class="slider-progress" :style="{ width: resetSliderPosition + 'px' }"></div>
                <div v-if="!isResetSliderComplete" class="slider-text">请按住滑块,拖动到最右边</div>
                <div v-if="isResetSliderComplete" class="slider-success-content">
                  <span class="verify-success-text">验证成功</span>
                </div>
                <div 
                  class="slider-handle reset-slider-handle" 
                  :class="{ 'slider-handle-complete': isResetSliderComplete }"
                  :style="{ left: resetSliderPosition + 'px' }"
                  @mousedown="startResetDrag"
                >
                  <img :src="isResetSliderComplete ? verifySuccessIcon : resetSliderIcon" alt="验证" class="slider-arrow">
                </div>
              </div>
            </div>

            <!-- 手机验证码输入 -->
            <div v-if="isResetSliderComplete" class="form-group verify-code-group">
              <input 
                type="text" 
                v-model="resetVerifyCode" 
                placeholder="手机验证码" 
                class="form-input verify-code-input"
              >
              <button type="button" class="get-code-btn" @click="getResetVerifyCode">
                获取验证码
              </button>
            </div>

            <div class="form-group password-group reset-password-group">
              <input 
                :type="showResetPassword ? 'text' : 'password'" 
                v-model="newPassword" 
                placeholder="输入新密码" 
                class="form-input"
                required
              >
              <button 
                type="button" 
                class="toggle-password" 
                @click="showResetPassword = !showResetPassword"
              >
                <img src="~/assets/images/img/A-2-1-PC登陆-注册_slices/眼睛显隐.png" alt="显示/隐藏密码" class="toggle-password-icon">
              </button>
            </div>

            <button 
              type="submit" 
              class="reset-btn" 
              :disabled="!isResetSliderComplete"
            >
              确定
            </button>
          </form>

          <div class="back-link">
            <a href="#" @click.prevent="goBackToLoginFromForgot">返回上一步</a>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close', 'switchToRegister'])

const currentStep = ref('login') // 'login'、'wechat' 或 'forgotPassword'
const emailOrPhone = ref('')
const password = ref('')
const showPassword = ref(false)
const autoLogin = ref(false)
const sliderPosition = ref(0)
const isSliderComplete = ref(false)
const isDragging = ref(false)
const sliderTrack = ref(null)

// 忘记密码相关
const resetPhone = ref('')
const resetVerifyCode = ref('')
const newPassword = ref('')
const showResetPassword = ref(false)
const resetSliderPosition = ref(0)
const isResetSliderComplete = ref(false)
const isResetDragging = ref(false)
const resetSliderTrack = ref(null)

// 三方登录图标 - 默认状态
const socialIcon1 = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/三方登录图标.png')
const socialIcon2 = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/三方登录图标(1).png')
const socialIcon3 = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/三方登录图标(2).png')

// 三方登录图标 - 悬停状态
const socialIcon1Hover = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/三方登录图标(4).png')
const socialIcon2Hover = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/三方登录图标(5).png')
const socialIcon3Hover = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/三方登录图标(7).png')

// 滑块图标
const sliderIcon = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆点击验证.png')

// 重置密码滑块图标
const resetSliderIcon = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆_三方登陆按钮悬停状态_slices/登陆点击验证.png')

// 验证成功图标
const verifySuccessIcon = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/符号组合.png')

// 微信二维码图片
const qrCodeImage = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/容器 1779.png')

// 复选框选中图片
const checkboxChecked = require('~/assets/images/img/A-2-1-PC登陆-注册_slices/选择框.png')

// 悬停状态
const hoverIcon1 = ref(false)
const hoverIcon2 = ref(false)
const hoverIcon3 = ref(false)

const closeModal = () => {
  emit('close')
}

const switchToRegister = () => {
  emit('switchToRegister')
}

const forgotPassword = () => {
  currentStep.value = 'forgotPassword'
  resetPhone.value = ''
  resetVerifyCode.value = ''
  newPassword.value = ''
  resetSliderPosition.value = 0
  isResetSliderComplete.value = false
}

const getResetVerifyCode = () => {
  console.log('获取验证码:', resetPhone.value)
  // 这里可以添加获取验证码的逻辑
}

const goBackToLoginFromForgot = () => {
  currentStep.value = 'login'
}

const handleResetPassword = () => {
  console.log('重置密码:', { phone: resetPhone.value, newPassword: newPassword.value })
  // 这里可以添加重置密码的逻辑
}

const switchToWechat = () => {
  currentStep.value = 'wechat'
}

const goBackToLogin = () => {
  currentStep.value = 'login'
}

const handleLogin = () => {
  console.log('登录:', { emailOrPhone: emailOrPhone.value, password: password.value, autoLogin: autoLogin.value })
  // 这里可以添加登录逻辑
}

// 滑块拖拽功能
const startDrag = (e) => {
  if (isSliderComplete.value) return // 如果已完成，不允许拖动
  isDragging.value = true
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
  e.preventDefault()
}

const onDrag = (e) => {
  if (!isDragging.value || !sliderTrack.value) return
  
  const trackRect = sliderTrack.value.getBoundingClientRect()
  const maxPosition = trackRect.width - 58 // 滑块宽度58px
  let newPosition = e.clientX - trackRect.left - 29
  
  if (newPosition < 0) newPosition = 0
  if (newPosition > maxPosition) {
    newPosition = maxPosition
    isSliderComplete.value = true
  } else {
    isSliderComplete.value = false
  }
  
  sliderPosition.value = newPosition
}

const stopDrag = () => {
  isDragging.value = false
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
}

// 忘记密码滑块拖拽功能
const startResetDrag = (e) => {
  if (isResetSliderComplete.value) return // 如果已完成，不允许拖动
  isResetDragging.value = true
  document.addEventListener('mousemove', onResetDrag)
  document.addEventListener('mouseup', stopResetDrag)
  e.preventDefault()
}

const onResetDrag = (e) => {
  if (!isResetDragging.value || !resetSliderTrack.value) return
  
  const trackRect = resetSliderTrack.value.getBoundingClientRect()
  const maxPosition = trackRect.width - 58 // 滑块宽度58px
  let newPosition = e.clientX - trackRect.left - 29
  
  if (newPosition < 0) newPosition = 0
  if (newPosition > maxPosition) {
    newPosition = maxPosition
    isResetSliderComplete.value = true
  } else {
    isResetSliderComplete.value = false
  }
  
  resetSliderPosition.value = newPosition
}

const stopResetDrag = () => {
  isResetDragging.value = false
  document.removeEventListener('mousemove', onResetDrag)
  document.removeEventListener('mouseup', stopResetDrag)
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  width: 680px;
  height: 520px;
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.modal-left {
  width: 300px;
  height: 520px;
  background: url('~/assets/images/img/A-2-1-PC登陆-注册_slices/登陆框_广告位.png') center/cover no-repeat;
  position: relative;
  flex-shrink: 0;
}

.modal-right {
  width: 380px;
  padding: 10px 35px;
  background: white;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.modal-header {
  width: 100%;
  height: 40px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 0;
  right: -20px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.close-btn:hover {
  opacity: 0.7;
}

.close-icon {
  width: auto;
  height: auto;
  display: block;
}

.modal-title {
  font-size: 18px;
  color: #333;
  margin: 0 0 30px 0;
  text-align: center;
  font-weight: 500;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.password-group {
  margin-bottom: 20px;
}

.reset-password-group {
  margin-bottom: 60px;
}

.form-input {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 4px;
  background: #F5F5F5;
  font-size: 14px;
  color: #333;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: #19D8B6;
  background: #F5F5F5;
}

.form-input::placeholder {
  color: #999;
}

.toggle-password {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.toggle-password:hover {
  opacity: 0.7;
}

.toggle-password-icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.login-btn {
  width: 100%;
  padding: 10px;
  background: #19D8B6;
  color: white;
  border: none;
  border-radius: 182px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 20px;
}

.login-btn:hover {
  background: #00C099;
}

.login-btn:disabled {
  background: #19D8B6;
  cursor: not-allowed;
  opacity: 0.6;
}

.login-btn:disabled:hover {
  background: #19D8B6;
  opacity: 0.6;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  font-size: 12px;
}

.auto-login {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: white;
}

.checkbox-custom.checked {
  border: none;
  background: transparent;
}

.checkbox-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
  display: block;
}

.login-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.login-links a {
  color: #19D8B6;
  text-decoration: none;
  font-size: 12px;
}

.login-links a:hover {
  text-decoration: underline;
}

.login-links a.forgot-password-link {
  color: #B3B3B3;
}

.login-links a.forgot-password-link:hover {
  color: #B3B3B3;
  text-decoration: underline;
}

.divider {
  color: #ddd;
  font-size: 12px;
}

.slider-verify {
  margin-bottom: 20px;
}

.slider-track {
  width: 100%;
  height: 40px;
  background: #F5F5F5;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 50px;
  padding-right: 10px;
  overflow: hidden;
}

.slider-track.slider-complete {
  background: #19D8B6;
  padding-left: 12px;
  padding-right: 12px;
}

.slider-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #19D8B6;
  border-radius: 4px;
  transition: width 0.1s;
  z-index: 0;
}

.slider-track.slider-complete .slider-progress {
  width: 100% !important;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 58px;
  height: 40px;
  background: white;
  border-radius: 4px;
  border: 2px solid #F5F5F5;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
  z-index: 2;
}

.slider-handle.slider-handle-complete {
  border-color: #19D8B6;
}

.reset-slider-handle {
  background: #19D8B6;
  border-color: #F5F5F5;
}

.reset-slider-handle.slider-handle-complete {
  background: white;
  border-color: #19D8B6;
}

.slider-handle:active {
  cursor: grabbing;
  background: #f0f0f0;
}

.reset-slider-handle:active {
  cursor: grabbing;
  background: #00C099;
}

.slider-arrow {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.slider-text {
  font-size: 14px;
  color: #999;
  position: absolute;
  left: 50px;
  right: 10px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  width: calc(100% - 60px);
}

.slider-success-content {
  position: absolute;
  left: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  pointer-events: none;
  width: calc(100% - 24px);
}

.verify-success-text {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.verify-success-icon {
  width: 24px;
  height: 24px;
  border: 1px dashed #4CAF50;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.verify-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 30px;
}

.social-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.social-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}

.social-icon:hover {
  border-color: #19D8B6;
  background: #f5f5f5;
}

.social-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.last-login {
  font-size: 11px;
  color: #19D8B6;
  white-space: nowrap;
  text-align: center;
}

.legal-disclaimer {
  font-size: 12px;
  color: #B3B3B3;
  text-align: center;
  white-space: nowrap;
  margin-top: auto;
  margin-bottom: 0;
}

.legal-disclaimer a {
  color: #666;
  text-decoration: none;
}

.legal-disclaimer a:hover {
  text-decoration: underline;
}

/* 微信扫码登录样式 */
.wechat-qr-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.qr-code {
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-code-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  display: block;
}

.auto-login-option {
  margin-bottom: 90px;
}

.back-link {
  text-align: center;
}

.back-link a {
  color: #19D8B6;
  text-decoration: none;
  font-size: 14px;
}

.back-link a:hover {
  text-decoration: underline;
}

/* 忘记密码表单样式 */
.reset-btn {
  width: 100%;
  padding: 10px;
  background: #19D8B6;
  color: white;
  border: none;
  border-radius: 182px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 20px;
}

.reset-btn:hover {
  background: #00C099;
}

.reset-btn:disabled {
  background: #19D8B6;
  cursor: not-allowed;
  opacity: 0.6;
}

.reset-btn:disabled:hover {
  background: #19D8B6;
  opacity: 0.6;
}

.verify-code-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.verify-code-input {
  flex: 1;
}

.get-code-btn {
  padding: 12px 20px;
  background: #342C2A;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
}

.get-code-btn:hover {
  background: #555;
}
</style>

